<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>房屋托管</title>
    <link rel="stylesheet" href="/css/bootstrap.css" th:href="@{/css/bootstrap.css}"/>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body class="container">
<br/>
<h1>房屋托管</h1>
<br/><br/>
<div class="with:80%">
    <form class="form-horizontal"   th:action="@{/landlord/addApartment}"  method="post" enctype="multipart/form-data">

        <div class="form-group">
            <label for="username" class="col-sm-2 control-label" >房东姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="username" id="username" placeholder="Username"/>
            </div>
        </div>

        <div class="form-group">
            <label for="address" class="col-sm-2 control-label" >房屋地址</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="address" id="address" placeholder="Address"/>
            </div>
        </div>

        <div class="form-group">
            <label for="picture" class="col-sm-2 control-label" >房屋图片</label>
            <div class="col-sm-10">
                <input type="file" class="form-control" name="file1" id="file"/><br>
                <input type="text" class="form-control" name="picture" id="picture"/><br>
                <p id="url"><img height="100" width="100"></p>
                <input type="button" value="上传图片" id="upload" class="btn btn-info"/><br>
            </div>
        </div>
        <br><br>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="提交" class="btn btn-info" />
                &nbsp; &nbsp; &nbsp;
                <input type="reset" value="重置" class="btn btn-info" />

            </div>

        </div>
    </form>
</div>
</body>
<script type="text/javascript">
    $(function () {
        $("#upload").click(function () {//点击事件--》上传图片
            //alert("1");
            //获取表单对象
            var form = new FormData();
            //接受表单第一个上传的数据，file命名不能和form里面的名字重复，为传到.java页面的值
            form.append("file",document.getElementById("file").files[0]);
            $.ajax({
                url: "/apartment/upload",//后台url
                type: "POST",//类型为post或get
                dataType: 'json',//数据返回类型，可以使xml，json等
                data: form,
                cache: false,
                async: false,
                processData: false,
                contentType: false,
                success:function (data) {//接受.java页面的参数
                    //document.write("1");
                    alert(JSON.stringify(data));
                    if (data){
                        var picture = "/images/"+data.fileName;
                        $("#picture").val("/images/"+data.fileName);
                        $("#url img").attr("src", picture);//attr() 方法设置或返回被选元素的属性值。
                    }else {
                        alert("失败");
                    }
                }
            })
        })
    })
</script>
</html>
